<template>
  <el-container ref="bigModel" class="main-model">
    <!-- 网络用户抗身份识别 -->
    <el-header>
      <div class="home-top-model">
        <Header :active-title="5" />
      </div>
    </el-header>
    <el-main>
      <div>
        <div class="home-model">
          <el-row style="background-color: #113366">
            <el-col :span="leftModelSpan">
              <div class="home-model-left">
                 <div class="wb">
                 微博
                </div>
                <div class="zh">
                  知乎
                </div>
                <indexUserTree style="z-index: 1000;"/>
                <img v-if="rightModelShow" :src="require('@/assets/xd/new/Group 1142813242.png')" alt="" class="rightJ"
                  style="" @click="hideRightModel">
                <img v-else :src="require('@/assets/xd/new/Group 1142813263.png')" alt="" class="rightJ" style=""
                  @click="showRightModel">
              </div>
            </el-col>
            <el-col :span="rightModelSpan">
              <div class="home-model-right">
                <div class="infoModel">
                  <div class="infoTitle flex-container">
                    用户信息泄露分析
                    <!-- 跳转终端页面 -->
                    <el-button type="text" @click="showantiAttributive" class="more">
                      更多
                    </el-button>
                  </div>
                  <div class="infoContent" :style="{ height: infoHeight + 'px' }">
                    <barchart />
                  </div>
                </div>

                <div class="infoModel">
                  <div class="infoTitle flex-container">
                    用户信息泄露告警
                    <!-- 跳转按钮到后台身份识别 -->
                    <el-button type="text" @click="showantiAttributive" class="more">
                      更多
                    </el-button>
                  </div>
                  <div class="infoContent" :style="{ height: infoHeight + 'px' }">
                    <list-scroll class="box" :speed="0.5">
                      <div class="list">
                        <div class="infoItem1" v-for="(item, index) in infoList" :key="index">
                          <div class="_num">
                            {{ index + 1 }}
                          </div>
                          <div class="_cont">
                            {{ item.content }}
                          </div>
                        </div>
                      </div>
                    </list-scroll>
                  </div>
                </div>
                <div class="infoModel">
                  <div class="infoTitle flex-container">
                    用户抗身份识别任务列表
                    <!-- 跳转终端页面 -->
                    <el-button type="text" @click="showantiAttributive" class="more">
                      更多
                    </el-button>
                  </div>
                  <div class="infoContent" :style="{ height: infoHeight + 'px' }">
                    <list-scroll class="box" :speed="0.5">
                      <div class="list">
                        <div class="infoItem2" v-for="(item, index) in infoList2" :key="index">
                          <div class="_num">
                            {{ index + 1 }}
                          </div>
                          <div class="_cont">
                            {{ item.content }}
                          </div>
                        </div>
                      </div>
                    </list-scroll>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
// import Dialog2 from "../dialog/dialog2.vue";
import Header from "@/views/xd/components/Header";
import indexUserTree from "@/views/xd/demo/indexUserTree.vue";
import ListScroll from "@/components/DtSrcollCopy2";
import barchart from "@/views/xd/components/charts/new/zhuxing.vue";
import * as echarts from 'echarts';

export default {
  components: { Header, indexUserTree, ListScroll, barchart },
  data() {
    return {
      rightModelShow: true,
      rightModelSpan: 5,
      leftModelSpan: 19,
      activeIndex: "1",
      activeIndex2: "1",
      formInline: {
        user: "",
        region: "",
      },

      infoList: [
        {
          content: "宁小宁，151232，存在身份信息泄露风险",
        },
        {
          content: "难过的猫咪，454124，存在社交关系泄露风险",
        },
        {
          content: "FEI165，362521，存在设备信息泄露风险",
        },
        {
          content: "活泼小狗，712727，存在履历信息泄露风险",
        },
        {
          content: "世界和平，365200，存在个人爱好泄露风险",
        },

        {
          content: "活泼小狗，712727，存在履历信息泄露风险",
        },
        {
          content: "世界和平，365200，存在个人爱好泄露风险",
        },
        {
          content: "探险家，151232，存在社交关系泄露风险",
        },
      ],
      infoList2: [
        {
          content: "杜甫NKK，658102，抗身份识别任务已完成50%",
        },
        {
          content: "UBB654，359752，抗身份识别任务已完成20%",
        },
        {
          content: "东方宇龙，845359，抗身份识别任务已完成60%",
        },
        {
          content: "小龙，756812，抗身份识别任务已完成20%",
        },
        {
          content: "祥子，656202，抗身份识别任务已完成80%",
        },
        {
          content: "青一枝，856202，抗身份识别任务已完成60%",
        }
      ],

      infoHeight: 300,
      chart: null,
      scrollTop: 0,
    };
  },
  mounted() {
    this.infoHeight = (this.$refs.bigModel.$el.offsetHeight - 80) / 3;
    let that = this;

  },
  methods: {
    showuser() {
      this.$router.push("/networkUser/user");
    },
    showantiLocalization() {
      this.$router.push("/networkUser/antiLocalization");
    },
    showantiAttributive() {
      this.$router.push("/networkUser/antiAttributive");
    },

    hideRightModel() {
      this.rightModelShow = false;
      this.rightModelSpan = 0;
      this.leftModelSpan = 24;
    },
    showRightModel() {
      this.rightModelShow = true;
      this.rightModelSpan = 5;
      this.leftModelSpan = 19;
    },
    touser_management() {
      this.$router.push("/networkUser/user");
    },

  },
};
</script>
<style lang="scss" scoped>
.home-model-right {

  border-radius: 5px;
  padding: 5px;
}

.home-model-left {
  position: relative;
  height: calc(100vh - 70px);
}

.home-model {
  width: 100%;
  height: 100%;

  .infoTitle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-image: url(~@/assets/xd/new/title.png);
    background-size: 100% 80%;
    background-repeat: no-repeat;
    color: #fff;
  }
}

.Tc2 {
  position: relative;
  left: 20px;
  top: 20px;
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

.infoItem {
  line-height: 1.3em !important;
  font-size: 18px;
}

.infoTable {
  font-size: 19px;
}

.rightJ {
  z-index: 1000;
}

// 微博知乎文字
.wb {
  font-size: 40px;
  color: #ffb302;
  position: absolute;
  top: 20%;
  left: 30%;

  text-align: center;
  z-index: 1;
}

.zh {
  font-size: 40px;
  color: #2aed07;
  position: absolute;
  top: 20%;
  left: 55%;
  text-align: center;
    z-index: 1;
}

.el-header {
  padding: 0;
  z-index: 5;
}

.more {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
}
</style>
